<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <!--总结：向哪个方向就没有那个方向的border，相邻边为透明，对边为三角形添加需要颜色。-->
    <style type="text/css">
        .arrow-up {
            width:0;
            height:0;
            border-right:50px solid transparent;
            border-left:50px solid transparent;
            border-top:50px solid red;
        }
        .arrow-down {
            width:0;
            height:0;
            border-right:50px solid transparent;
            border-left:50px solid transparent;
            border-bottom:50px solid red;
        }
        .arrow-left {
            width:0;
            height:0;
            border-top:50px solid transparent;
            border-bottom:50px solid transparent;
            border-right:50px solid red;
        }
        .arrow-right {
            width:0;
            height:0;
            border-top:50px solid transparent;
            border-bottom:50px solid transparent;
            border-left:50px solid red;
        }
    </style>
</head>
<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>